<template>
	<view>
		<u-popup :show="show" :round="10" @close="close" @open="open">
				<view class="box flex flex-col ai-c p-30" style="width: 750rpx;">
					<view class="fw m-t-20 m-b-60">一键获取授权信息</view>
					<view class="item flex jc-sb ai-c u-border-bottom">
						<view class="flex flex-col jc-c" style="width: 60%;">
							<view class="ft-30">授权头像</view>
							<view class="ft-24 c-info">一键授权获取头像或上传图片</view>
						</view>
						<view class="right flex jc-r ai-c">
							<button class="u-reset-button m-0" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<u-avatar :src="avatar"></u-avatar>
							</button>
						</view>
					</view>
					<view class="item flex jc-sb ai-c u-border-bottom">
						<view class="flex flex-col jc-c" style="width: 60%;">
							<view class="ft-30">授权昵称</view>
							<view class="ft-24 c-info">一键授权获取昵称或编辑昵称</view>
						</view>
						<view class="right">
							<input class="nickname-input" name='nickname' type="nickname" v-model="nickname"
								placeholder="请输入昵称" @blur="changeNickname"></input>
						</view>
					</view>

					<view class="tips ft-24 c-info p-30 m-t-30">
						99%的客户都选择了授权获取头像和昵称，更好的方便平台识别为您提供专属服务!
					</view>

					<view class="m-t-60" style="width: 80%;">
						<u-button type="primary" shape="circle" text="确定" @click="updateInfo">确定</u-button>
					</view>
				</view>
		</u-popup>
	</view>
</template>

<script>
	import mixin from '@/utils/mixin.js'
	import store from '@/store/index.js'
	import Jconfig from '@/config/config.js'
	import { updateUserInfo } from '@/api/api.js'
	export default {
		name: "authPopup",
		data() {
			return {
				show: false,
				avatar: "",
				nickname: "",
			};
		},
		methods: {
			open: function() {
				this.show = true
				let userinfo = this.$parent.userinfo
				this.avatar = userinfo.avatar || ""
				this.nickname = userinfo.nickname || ""
			},
			close: function() {
				this.show = false
			},
			onChooseAvatar: function(e) {
				let _this = this
				this.avatar = e.detail.avatarUrl
			},
			changeNickname(e){
				this.nickname = e.detail.value
			},
			updateInfo: function() {
				let _this = this
				if (uni.$u.test.isEmpty(_this.avatar) || uni.$u.test.isEmpty(_this.nickname)) {
					uni.showToast({
						icon: "none",
						title: "请填写完整信息"
					})
					return
				}
				
				if(_this.avatar.includes(Jconfig.baseURL)){
					_this.update({nickname: _this.nickname,avatar: _this.avatar})
				}else{
					_this.$util.uploadFile(
						this.avatar,
						function(res) {
							const { url } = res.data
							_this.update({nickname: _this.nickname,avatar: url})
							_this.close()
						}
					);
				}
			},
			update:function(data){
				let _this = this
				data.is_auth = true;
				updateUserInfo(data).then((res) => {
					_this.close()
					_this.$util.Tips({title:'提交成功'})
					_this.$emit('authAfter')
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.item {
			width: 100%;
			height: 120rpx;

			.right {
				width: 40%;
				height: 100%;

				.nickname-input {
					height: 100%;
					text-align: right;
				}
			}
		}

		.tips {
			background-color: #f4f4f5;
		}
	}
</style>